<template>
  <div>
    <myBreadcrumb></myBreadcrumb>
    <el-upload
      class="upload-demo"
      action
      multiple
      :limit="2"
      :file-list="fileList"
      :http-request="handleUploadForm"
      :on-exceed="formHandleExceed"
      :on-remove="formHandleRemove"
      :before-upload="beforeUploadForm"
      accept=".png,.jpg,.jpeg"
    >
      <el-button type="primary">上传文件</el-button>
      <span slot="tip" class="el-upload__tip" style="margin: 0 10px"
        >只能上传.png,.jpg,.jpeg文件，且不超过{{ formMaxSize }}M</span
      >
    </el-upload>
  </div>
</template>

<script>
import myBreadcrumb from "@/views/Breadcrumb.vue";
export default {
  data() {
    return {
      formMaxSize: 2, // 上传文件大小
      fileList: [], // 显示上传文件
      uploadFormFileList: [], // 确定上传文件
    };
  },
  components: {
    myBreadcrumb,
  },
  methods: {
    // 开始上传前验证
    beforeUploadForm(file) {
      // 验证文件大小
      if (file.size / 1024 / 1024 > this.formMaxSize) {
        this.$message({
          message: `上传文件大小不能超过${this.formMaxSize}M!`,
          type: "warning",
        });
        return false;
      }
      // 中文乱码处理
      if (file.raw) {
        let reader = new FileReader(); // 读取文件内容
        reader.readAsText(file.raw, "gb2312"); // 防止中文乱码问题，不加reader.onload方法都不会触发
        reader.onload = function (e) {
          this.contentHtml = e.target.result; // txt文本内容，接下来就可以对其进行校验处理了
        };
      }
      // 验证文件类型
      var testmsg = file.name.substring(file.name.lastIndexOf(".") + 1);
      const extension =
        testmsg === "png" || testmsg === "jpg" || testmsg === "jpeg";
      if (!extension) {
        this.$message({
          message: "上传文件只能是.png,.jpg,.jpeg格式!",
          type: "warning",
        });
      }
      return extension;
    },
    // 移除上传列表中文件
    formHandleRemove(file, fileList) {
      let thiz = this;
      for (let i = 0; i < thiz.uploadFormFileList.length; i++) {
        if (thiz.uploadFormFileList[i].pname === file.name) {
          thiz.uploadFormFileList.splice(i, 1);
          break;
        }
      }
    },
    // 允许上传文件个数验证
    formHandleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 2 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
          files.length + fileList.length
        } 个文件`
      );
    },
    // 上传文件
    handleUploadForm(param) {
      let thiz = this;
      let formData = new FormData();
      formData.append("id", "58"); // 额外参数
      formData.append("files", param.file);
      let loading = thiz.$loading({
        lock: true,
        text: "上传中，请稍候...",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      thiz.$axios
        .post("http://localhost:53464/api/values/UpLoadImageFiles2", formData)
        .then((res) => {
          if (res.status === 200) {
            thiz.$message("上传文件成功，" + res.data);
            console.log(res.data);
            thiz.fileList.push("http://localhost:53464" + res.data);
          } else {
            thiz.fileList = [];
            thiz.uploadFormFileList = [];
            thiz.$message("上传文件失败，" + res.message);
          }
          loading.close();
        });
    },
  },
};
</script>
<style scoped>
</style>